<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点样式操作</title>
    <style>
        .p1{
            color: tomato;
        }
        .p2{
            font-size: 30px;
        }
    </style>
</head>
<body>

<p id="p1">hello javascript</p>
<button onclick="add_size()">添加字体大小</button>
<button onclick="add_color()">添加字体颜色</button>
<script>

    //节点对象
    var  p_ele = document.getElementById('p1')
    // 动态属性
    // p_ele.style.color = 'blue'
    // p_ele.style.fontSize = '30px'

    // 添加class
    // p_ele.className = 'p1 p2'
    // p_ele.className = 'p2'

    // classList

    function add_size(){
        p_ele.classList.add('p2')
    }

    function add_color(){
        p_ele.classList.add('p1')
    }

</script>

</body>
</html>